<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>有道背单词:四级真题核心词</title>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdn.bootcss.com/mobile-detect/1.4.3/mobile-detect.min.js"></script>
    <script src="https://cdn.bootcss.com/vue/2.6.4/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.min.js"></script>
</head>
<body>
<style>
    #search-div {
        z-index: 999;
        display: block;
        right: 100px;
        position: fixed;
        top: 50px;
    }

    #search-word {
        height: 50px;
        width: 224px;
    }
</style>
<div id="search-div">
    <input id="showEN" type="button" value="隐藏英文">
    <input id="showSoundMark" type="button" value="隐藏音标">
    <input id="showCN" type="button" value="隐藏中文">
    <br>
    <input id="search-word" type="text" placeholder="输入单词，然后按enter键">
</div>
<div class="card" id="word">
    <div class="card-body">
        <table class="table table-bordered">
            <tr v-for="(word, index) in wordData">
                <td :name="index+1" class="wordEn"><span>{{ index+1 }}</span></td>
                <td :name="word.headWord" class="wordEn"><span>{{ word.headWord }}</span></td>
                <td :name="word.headWord+'-soundMark'" class="soundMark"><span>英:{{ word.content.word.content.ukphone }}&nbsp;&nbsp;&nbsp;&nbsp;美:{{
                    word.content.word.content.usphone }}</span></td>
                <td :name="word.content.word.content.trans[0].tranCn" class="wordCn"><span>{{ word.content.word.content.trans[0].tranCn }}</span></td>
            </tr>
        </table>

    </div>

</div>
</body>

<script>
    function JsonSort(json, key) {
        for (var j = 1, jl = json.length; j < jl; j++) {
            var temp = json[j],
                val = temp[key],
                i = j - 1;
            while (i >= 0 && json[i][key] > val) {
                json[i + 1] = json[i];
                i = i - 1;
            }
            json[i + 1] = temp;

        }
        return json;
    }

    let app = new Vue({
        el: '#word',
        data: {
            wordData: [],

        },
        methods: {},
        created: function () {
            if (localStorage.getItem('word_cache')) {
                this.wordData = JSON.parse(localStorage.getItem('word_cache'));
            } else {
                this.$http.get('CET4luan_1_format.json', {}).then(function (data) {
                    let json_sorted = JsonSort(data.body, 'headWord');
                    this.wordData = json_sorted;
                    localStorage.setItem('word_cache', JSON.stringify(json_sorted))
                });

            }
        }
    });

    $('#search-word').keyup(function(event){
        if(event.keyCode === 13){
            let text = $('#search-word').val();
            console.log();
            $('html, body').animate({
                scrollTop: $("[name="+text+"]").offset().top
            }, 600);
        }
    });

    $('#showEN').click(function () {
        if ($('#showEN').val() === '隐藏英文') {
            $('.wordEn span').css('visibility', 'hidden');
            $('#showEN').val('显示英文');
        } else {
            $('.wordEn span').css('visibility', 'visible');
            $('#showEN').val('隐藏英文');
        }
    });

    $('#showSoundMark').click(function () {
        if ($('#showSoundMark').val() === '隐藏音标') {
            $('.soundMark span').css('visibility', 'hidden');
            $('#showSoundMark').val('显示音标');
        } else {
            $('.soundMark span').css('visibility', 'visible');
            $('#showSoundMark').val('隐藏音标');
        }
    });

    $('#showCN').click(function () {
        if ($('#showCN').val() === '隐藏中文') {
            $('.wordCn span').css('visibility', 'hidden');
            $('#showCN').val('显示中文');
        } else {
            $('.wordCn span').css('visibility', 'visible');
            $('#showCN').val('隐藏中文');
        }
    });

    $('.wordEn').click(function (e) {
        let text = e.currentTarget.attributes.getNamedItem('name').value;
        if ($("[name='" + text + "'] span").css('visibility') === 'visible' ) {
            $("[name='" + text + "'] span").css('visibility', 'hidden');
        }else {
            $("[name='"+text+"'] span").css('visibility', 'visible');

        }
        // console.log(e.currentTarget.attributes);
        // console.log(e.currentTarget.attributes.length);
        // console.log(e.currentTarget.attributes.item(0));
        // console.log(e.currentTarget.attributes.getNamedItem('name').value);
        // console.log(e.currentTarget.attributes.getNamedItem('class').value)
    });

    $('.wordCn').click(function (e) {
        let text = e.currentTarget.attributes.getNamedItem('name').value;
        if ($("[name='" + text + "'] span").css('visibility') === 'visible' ) {
            $("[name='" + text + "'] span").css('visibility', 'hidden');
        }else {
            $("[name='"+text+"'] span").css('visibility', 'visible');

        }
    });

    $('.soundMark').click(function (e) {
        let text = e.currentTarget.attributes.getNamedItem('name').value;
        if ($("[name='" + text + "'] span").css('visibility') === 'visible' ) {
            $("[name='" + text + "'] span").css('visibility', 'hidden');
        }else {
            $("[name='"+text+"'] span").css('visibility', 'visible');

        }
    });

</script>
</html>